<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
           <a-col :md="6" :sm="8">
            <a-form-item label="接口服务名称">
              <j-input placeholder="请输入接口服务名称" v-model="queryParam.apiName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="接入类型">
              <j-dict-select-tag  v-model="queryParam.apiMethod" placeholder="请选择请求方式" dict-code="api_method" />
              <!-- <a-select allowClear placeholder="请选择接入类型" v-model="queryParam.apiMethod">
                <a-select-option value="1">HTTP</a-select-option>
                <a-select-option value="2">webservice</a-select-option>
              </a-select> -->
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button @click="batchDel" type="primary"> 批量删除 </a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">取消勾选</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
          :scroll="{ x: 1300 }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="authorizationMethod" slot-scope="text">
          {{ text == '1' ? '无需授权' : (text == '2' ? '提供方授权' : (text == '3' ? '平台授权' : '')) }}
        </span>
        <span slot="isAuthorized" slot-scope="text">
          {{ text == '1' ? '是' : '否' }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleSync(record)">同步</a>
          <a-divider type="vertical"/>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a @click="handleDetail(record)">详情</a>
          <a-divider type="vertical"/>
          <a-popconfirm placement="topLeft" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->
    <SysDataSourceInterfaceModal ref="modalForm" @ok="modalFormOk" @close="freshTable"></SysDataSourceInterfaceModal>
    <!-- <a-modal :visible="visible" title="同步" @ok="handleOk" @cancel="handleCancel">
      <p>确定要同步接口数据吗？</p>
    </a-modal> -->
  </a-card>
</template>

<script>
import { putAction, getFileAccessHttpUrl, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SysDataSourceInterfaceModal from './modules/SysDataSourceInterfaceModal'
import { getAction } from '../../api/manage'
import pick from 'lodash.pick'
export default {
  name: 'InterfaceList',
  components: {
    SysDataSourceInterfaceModal
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      // hasTable: false,
      description: '接口管理页面',
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '数据源名称',
          align: 'center',
          dataIndex: 'apiName',
          sorter: true
        },
        {
          title: '数据源描述',
          align: 'center',
          dataIndex: 'apiDescription'
        },
        {
          title: '是否授权接口',
          align: 'center',
          width: 120,
          dataIndex: 'isAuthorized',
          scopedSlots: { customRender: 'isAuthorized' }
        },
        // {
        //   title: '授权方式',
        //   align: 'center',
        //   width: 100,
        //   dataIndex: 'authorizationMethod',
        //   scopedSlots: { customRender: 'authorizationMethod' }
        // },
        {
          title: '接入类型',
          align: 'center',
          width: 90,
          dataIndex: 'apiMethod_dictText'
        },
        {
          title: '服务URL',
          align: 'center',
          dataIndex: 'apiUrl'
        },
        {
          title: '接口文档',
          align: 'center',
          dataIndex: 'interfaceDocumentationPath'
        },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 180
        }

      ],
      url: {
        list: '/dataSource/scApi/list',
        delete: '/dataSource/scApi/delete',
        deleteBatch: '/dataSource/scApi/deleteBatch',
        exportXlsUrl: '/sys/user/exportXls',
        importExcelUrl: 'sys/user/importExcel',
        checkOnlyTable: '/dataSource/scSituationTable/checkOnlyTable'
      },
      validatorRules: {
        tableName: { rules: [{ required: true, message: '请输入数据表名称!' }, {
            validator: this.validateTableName
          }] }
      },
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // visible: false,
      // apiId: null
    }
  },
  computed: {
  },
  methods: {
    // handleOk() {
    //   const that = this
    //   // 触发表单验证
    //   this.form.validateFields((err, values) => {
    //     if (!err) {
    //       postAction('/dataSource/api/scApiDatatable/add', { apiId: this.apiId, tableName: values.tableName }).then(res => {
    //         if (res.success) {
    //           that.searchQuery()
    //           that.visible = false
    //         } else {
    //           this.$message.warning(res.message)
    //         }
    //       })
    //     }
    //   })
    // },
    handleCancel() {
      this.visible = false
    },
    handleSync(record) {
      var that = this
      // 立即执行同步任务
      this.$confirm({
        title: '确认提示',
        content: '是否立即同步任务?',
        onOk: function () {
          postAction('/dataSource/api/scApiDatatable/add', { apiId: record.id, tableName: record.tableName }).then(res => {
            if (res.success) {
              that.searchQuery()
              that.visible = false
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    validateTableName(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        const part1 = new RegExp('^[a-zA-Z].*')
        const part2 = new RegExp('^[a-zA-Z]{1}_.*')
        const part3 = new RegExp('^[0-9].*')
        const part4 = new RegExp('[\u4E00-\u9FA5]')
        const part5 = new RegExp('^[0-9]*$')
        const part6 = new RegExp('^[a-zA-Z][a-zA-Z0-9_]*$')
        if (value.length > 30) {
          callback('长度不能超过30')
        } else if (!part1.test(value)) {
          callback('必须以字母开头')
        } else if (part2.test(value)) {
          callback('不能以单个字母加下划线开头')
        } else if (part3.test(value)) {
          callback('不能以数字开头')
        } else if (part4.test(value)) {
          callback('不能包含汉字')
        } else if (part5.test(value)) {
          callback('不能全部是数字')
        } else if (!part6.test(value)) {
          callback('不能包含特殊符号')
        } else {
          const params = {
            id: '',
            tbname: value
          }
          getAction(this.url.checkOnlyTable, params).then(res => {
            if (res.success && res.result === -1) {
              callback('表名已存在')
            } else {
              callback()
            }
          }).catch(() => {
            callback()
          })
        }
      }
    },
    freshTable() {
      this.searchQuery()
    }
  }

}
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
